<template>
    <div class="container">
        <div class="logoTitle" @click="indexClick()">
            <img src="@/assets/logo.png" :class="isCollapse ? 'logoContainerCollapse' : 'logoContainer'" />
            <span v-if="!isCollapse" class="titleContainer">YWU 一站式应用管理</span>
        </div>
        <el-menu
            :default-active="defaultActiveIndex"
            background-color="#304156"
            class="barItemContainer"
            text-color = "#BFCBD9"
            active-text-color="#409EFF"
            :unique-opened="true"
            :router = "true"
            :collapse="isCollapse"
            mode="vertical"
        >
            <AsideBarItem v-for="item in barItem" :key="item.id" :barItem="item"/>
        </el-menu>
    </div>
</template>

<script>
import AsideBarItem from "@/components/AsideBarItem";
import {menuRouterQuery} from "@/request/routerRequest";

export default {
    name: "AsideBar",
    data() {
        return {
            // 侧边栏展示内容，后端获取
            barItem: []
        }
    },
    computed: {
        defaultActiveIndex() {
            return this.$route.path
        },
        isCollapse() {
            return this.$store.state.isCollapse
        }
    },
    components: {
        AsideBarItem
    },
    methods: {
        // 递归将meta中的json字符串转换为对象
        handlerMeta(dataInfo) {
            let len = dataInfo.length;
            for (let i = 0; i < len; i++) {
                dataInfo[i].meta = JSON.parse(dataInfo[i].meta);
                if (dataInfo[i].children !== null && dataInfo[i].children.length > 0) {
                    this.handlerMeta(dataInfo[i].children);
                }
            }
        },
        indexClick() {
            this.$router.push("/")
        }
    },
    created() {
        menuRouterQuery().then(res => {
            this.barItem = res.data.filter(res => res.routeRootName === 'ywu-home');
            // 递归将meta中的json字符串转换为对象
            this.handlerMeta(this.barItem);
        })
    }
}
</script>

<style scoped lang="less">
    .container {
        width: 100%;
        height: 100%;
        .logoTitle {
            width: 100%;
            height: 5%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #304156;
            .logoContainer {
                transition: 0.5s;
                width: 10%;
                height: 45%;
                margin-right: 5%;
            }
            .titleContainer {
                font-size: 14px;
                color: rgb(255, 255, 255);
                font-weight: bold;
            }
        }
        .logoTitle:hover {
            cursor: pointer;
        }
        .barItemContainer {
            width: 100%;
            height: 95%;
            padding: 0;
            border: 0 solid black;
        }
    }

    .logoContainerCollapse {
        transition: 0.5s;
        width: 40%;
        height: 40%;
        margin-right: 5%;
    }

</style>